<template>
<view class="a">
    <view class="bu"></view>
    <view class="footer row">
        <view v-for="(item,index) in tabBar.list" :key="index" @click="go(item.pagePath)">
            <image class="icon" :src="cur==index?item.selectedIconPath:item.iconPath" mode="" />
            <view class="text" :class="cur==index?'cur':''">{{item.text}}</view>
        </view>
	</view>
</view>
</template>
<script>
	export default {
		data() {
			return {
				tabBar: {
                    "color": "#999999",
                    "selectedColor": "#ff4a4a",
                    "list": [
                        {
                            "pagePath": "pages/index/index",
                            "text": "首页",
                            "iconPath": "/static/icon/04.png",
                            "selectedIconPath": "/static/icon/05.png"
                        },
                        {
                            "pagePath": "pages/me/index",
                            "text": "我的",
                            "iconPath": "/static/icon/08.png",
                            "selectedIconPath": "/static/icon/09.png"
                        }
                    ]
                },
			};
		},
        name: 'cu-custom',
        created(){
		    uni.hideTabBar({})

        },
		computed: {
            
			style() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var bgImage = this.bgImage;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			}
		},
		props: {
			cur: {
				type: Number,
				default: ''
			}
		},
		methods: {
			go(url){
                console.log(url);
                // uni.navigateTo({
                //      url:"/"+url
                // })
                uni.switchTab({
                    url:"/"+url

                });
            }
		}
	}
</script>

<style lang="scss">
    .bu{
        height: 100rpx;
    }
    .footer{
        width: 100%;
        height: 100rpx;
        position: fixed;
        bottom: 0rpx;
        background: #fff;
        // justify-content: space-evenly;
        box-shadow: 0rpx 0rpx 10rpx 10rpx #e1e1e1;
       justify-content: space-around;
        .icon{
            width: 50rpx;
            height: 50rpx;
        }
        .cur{
            color: $col;
        }
    }
</style>